<template>
	<view class="dialog_box" v-if="show">
		<view class="bg"></view>
		<view class="dialog_content">
			<view class="bag">
				<image class="pop-bgc" :src="img + '/img/home-pop-bg.png'"></image>
				<view class="divss">
					<view class="namne">提示</view>
					<view class="namnes">{{ msg!=null&&msg!=''?msg:"网络异常" }}</view>
					<view class="button" @click="hideDialog()">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			msg: {
				type: String,
				default: ""
			},
			isConfirm: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				img: this.$BASE_URL,
				show: false
			};
		},
		onLoad() {},
		methods: {
			showDialog() {
				this.show = true;
			},
			hideDialog() {
				this.show = false;
				debugger
				if (this.isConfirm != undefined&&this.isConfirm!=null && this.isConfirm == true) {
					this.$emit('confirm')
				}

				// uni.switchTab({
				// 	url: '/pages/tab/index'
				// });
			},
			gzh() {
				this.show = false;
				// uni.navigateTo({
				// 	url: '/pages2/explain/explain'
				// });
			}
		}
	};
</script>

<style lang="scss" scoped>
	.dialog_box {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 999;

		.bg {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.dialog_content {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 10;
			text-align: center;

			.title {
				font-size: 50rpx;
				color: #fff;
				margin: 40rpx auto;
			}

			.bag {
				position: relative;
				width: 500rpx;
				height: 562rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				opacity: 1;
				overflow: hidden;
				margin-left: 125rpx;
				margin-top: 40%;

				.divss {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;

					.namne {
						color: rgba(45, 49, 50, 0.8);
						font-weight: 400;
						font-size: 40rpx;
						font-family: 'PingFang SC-Heavy, PingFang SC';
						width: 100%;
						height: 56rpx;
						line-height: 56rpx;
						margin-top: 156rpx;
						text-align: center;
					}

					.button {
						width: 392rpx;
						height: 84rpx;
						background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);
						border-radius: 42rpx;

						font-size: 28rpx;
						font-family: 'PingFang SC-Regular, PingFang SC';
						font-weight: 400;
						color: #415c9e;
						line-height: 84rpx;
						text-align: center;
						margin: 0 auto;
						margin-top: 64rpx;
					}

					.namnes {
						width: 364rpx;
						height: 96rpx;
						font-size: 28rpx;
						font-family: 'PingFang SC-Regular, PingFang SC';
						font-weight: 400;
						color: #4a4a4a;
						line-height: 48rpx;
						margin: 0 auto;
						margin-top: 40rpx;
						text-align: center;
					}
				}

				.pop-bgc {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					// z-index: -1;
				}

				.bag_body {
					width: 100%;
					height: 500rpx;
					margin: auto;
					background-color: #ff2c21;
					border-bottom-left-radius: 50rpx;
					border-bottom-right-radius: 50rpx;
					margin-top: -200rpx;

					.ul {
						margin: -100rpx 20rpx 20rpx;
						border-radius: 32rpx;
						background-color: #ffffff;
						width: calc(100% - 40rpx);
						height: calc(100% - 20rpx);

						.li {
							position: relative;
							padding: 20rpx;
							font-size: 0;
							border-bottom: 1px solid #eee;

							.lred,
							.rred {
								position: absolute;
								bottom: -20rpx;
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								background-color: #ff2c21;
							}

							.lred {
								left: -20rpx;
							}

							.rred {
								right: -20rpx;
							}

							&:last-child {

								.lred,
								.rred {
									display: none;
								}
							}

							.img,
							.txt,
							.money {
								vertical-align: middle;
								display: inline-block;
							}

							.img {
								width: 80rpx;
							}

							.txt {
								text-align: left;
								margin-left: 20rpx;
								width: calc(80% - 100rpx);

								.name {
									font-size: 40rpx;
									color: #000;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.tip {
									font-size: 20rpx;
									color: #bbbbbb;
								}
							}

							.money {
								font-size: 40rpx;
								color: #ca6143;
								font-weight: 700;
								width: 20%;

								label {
									font-size: 20rpx;
								}
							}
						}
					}
				}

				.bag_foot {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: 100rpx;

					&::before {
						content: '';
						position: absolute;
						left: -10%;
						top: -100rpx;
						width: 120%;
						height: 100rpx;
						border-radius: 50%;
						box-shadow: 0 50rpx 0 0 #f4c35d;
					}

					&::after {
						content: '';
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 100%;
						background-image: linear-gradient(#f4c35d, #fb3e2a);
					}

					.txt {
						position: absolute;
						left: 0;
						top: 0;
						z-index: 10;
						width: 100%;
						height: 100rpx;
						line-height: 100rpx;
						font-size: 30rpx;
						color: #fff;
						text-align: center;
					}
				}
			}
		}

		.dialog_foot {
			margin-top: 40rpx;
			text-align: center;
		}
	}

	.sasas {
		width: 530rpx;
		height: 260rpx;
		background: #ffffff;
		border-radius: 20rpx;
	}

	.sasasa {
		width: 460rpx;
		margin: 0 auto 0rpx;
		padding-top: 100rpx;
		height: 120rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 40rpx;
	}
</style>